<template>
  <div class="activity-details-container">
    <!--活动信息展示区 -->
    <el-card class="activity-info-card" shadow="hover">
      <h1 class="activity-name">{{ activityDetails?.activityTitle }}</h1>
      <div class="info">
        <div class="info-item">
          <span class="info-label">所属社团:</span>
          <span class="info-content">
            {{ activityDetails?.clubVO?.clubName }}
            (编号: {{ activityDetails?.clubVO?.id }})
          </span>
        </div>
        <div class="info-item">
          <span class="info-label">时间:</span>
          <span class="info-content">
            {{ formatDateTime(activityDetails?.startTime) }} -
            {{ formatDateTime(activityDetails?.endTime) }}
          </span>
        </div>
        <div class="info-item">
          <span class="info-label">状态:</span>
          <el-tag :type="getStatusType(activityDetails?.status)">
            {{ activityDetails?.status }}
          </el-tag>
        </div>
      </div>
    </el-card>

    <!-- 菜单 -->
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="详情" name="details"></el-tab-pane>
      <el-tab-pane
        label="人员"
        name="members"
        :disabled="!isParticipant"
      ></el-tab-pane> </el-tabs
    ><RouterView />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, type TabsPaneContext } from "element-plus";
import {
  ActivityControllerService,
  type ActivityMembershipQueryRequest,
} from "../../../../generated";
import moment from "moment";
import USER_ROLE_ENUM from "../../../access/userRoleEnum.ts";
import { useUserStore } from "../../../stores/user.ts";

const route = useRoute();
const router = useRouter();
const activityId = Number(route.query.activityId);

interface ActivityDetails {
  id: number;
  activityTitle: string;
  activityContent: string;
  startTime: string;
  endTime: string;
  status: string;
  clubVO: {
    id: number;
    clubName: string;
  };
}

const activityDetails = ref<ActivityDetails | null>(null);
const activeName = ref("details");

const loadActivityDetails = async () => {
  try {
    const response =
      await ActivityControllerService.getActivityVoById(activityId);
    if (response.code === 0 && response.data) {
      activityDetails.value = response.data;
    } else {
      ElMessage.error(response.message || "加载活动详情失败");
    }
  } catch (error) {
    console.error("加载活动详情时发生错误:", error);
    ElMessage.error("系统错误，请稍后重试");
  }
};

const userStore = useUserStore();
const isParticipant = ref(false);

const checkParticipationStatus = async () => {
  if (userStore.userRole === USER_ROLE_ENUM.ADMIN) {
    isParticipant.value = true;
    return;
  }
  try {
    const response = await ActivityControllerService.isUserInActivity({
      activityId: activityId,
      userId: userStore.id,
    } as ActivityMembershipQueryRequest);
    if (response.code === 0) {
      isParticipant.value = response.data;
    } else {
      ElMessage.error("无法检查参与状态");
    }
  } catch (error) {
    console.error("检查参与状态时发生错误:", error);
    ElMessage.error("无法检查参与状态");
  }
};

const formatDateTime = (dateTime: string | undefined) => {
  if (!dateTime) return "未设置";
  return moment(dateTime).format("YYYY-MM-DD HH:mm:ss");
};

const getStatusType = (status: string | undefined) => {
  switch (status) {
    case "确认举办":
      return "info";
    case "进行中":
      return "success";
    case "已结束":
      return "warning";
    default:
      return "info";
  }
};

const handleClick = (tab: TabsPaneContext) => {
  const activityId = route.query.activityId;
  switch (tab.paneName) {
    case "details":
      router.push({ path: `/activity/details`, query: { activityId } });
      break;
    case "members":
      router.push({ path: `/activity/members`, query: { activityId } });
      break;
    default:
      console.error("未知选项:", tab.paneName);
  }
};

onMounted(async () => {
  await loadActivityDetails();
  await checkParticipationStatus();
});
</script>

<style scoped>
.activity-details-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  box-sizing: border-box;
}

.activity-info-card {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  flex: 1;
  text-align: left !important;
  position: relative;
}

.activity-name {
  font-size: 24px;
  font-weight: bold;
  color: #5c6bc0;
  margin-bottom: 15px;
  text-align: left;
}

.info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 15px;
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #3f51b5;
}

.info-label {
  min-width: 80px;
  font-weight: bold;
  color: #5c6bc0;
}

.info-content {
  flex: 1;
}

.demo-tabs {
  margin-bottom: 10px;
}

.demo-tabs > .el-tabs__content {
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
